// uno.config.ts
import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'
import presetIcons from '@unocss/preset-icons'
import presetAttributify from '@unocss/preset-attributify'

export default defineConfig({
  presets: [
    presetUno(),
    presetIcons({
      /* 默认就会扫描 node_modules/@iconify-json */
      extraProperties: { 'display': 'inline-block' },
    }),
    presetAttributify(),
  ],

  /* -------- 安全列表（ElementPlus 菜单等动态类） -------- */
  safelist: [
    'i-carbon-sun',
    'i-carbon-moon',
    'i-carbon-close',
    'i-carbon-menu',
    'el-menu',
    'el-menu--collapse',
    'el-menu-item',
    'el-sub-menu',
    'el-sub-menu__title',
    'el-menu-item-group',
    'is-active',
    'is-opened',
    'is-collapsed',
    // 如果你用到了 el-button / el-input 等，也可以继续加
    'el-button',
    'el-button--primary',
  ],

  /* -------- 扫描范围 -------- */
  content: {
    filesystem: ['src/**/*.{vue,ts,tsx}'],
    // 把 EP 的 scss 拉进来，让 UnoCSS 认识那些动态类名
    inline: [
      'node_modules/element-plus/theme-chalk/src/menu.scss',
      'node_modules/element-plus/theme-chalk/src/sub-menu.scss',
      'node_modules/element-plus/theme-chalk/src/menu-item.scss',
      'node_modules/element-plus/theme-chalk/src/button.scss',
    ],
  },

  /* -------- 快捷方式（业务常用组合） -------- */
  shortcuts: [
    ['btn', 'py-2 px-4 bg-primary text-white rounded hover:bg-blue-600'],
    ['btn-outline', 'py-2 px-4 border border-primary text-primary rounded hover:bg-primary hover:text-white'],
    ['card', 'bg-white rounded shadow p-4'],
  ],

  /* -------- 主题扩展 -------- */
  theme: {
    colors: {
      primary: '#3b82f6',
      success: '#22c55e',
      warning: '#f59e0b',
      danger: '#ef4444',
    },
    breakpoints: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      xxl: '1536px',
    },
    spacing: {
      18: '4.5rem',
      88: '22rem',
    },
  },

  /* -------- 自定义静态规则（示例） -------- */
  rules: [
    [/^m-(\d+)$/, ([, d]) => ({ margin: `${+d * 0.25}rem` })],
    [/^p-(\d+)$/, ([, d]) => ({ padding: `${+d * 0.25}rem` })],
  ],
})
